<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>${constants.getSystemName()}</title>
    <link rel="stylesheet" href="${ctxPath}/assets/common/libs/layui/css/layui.css?v=${constants.getReleaseVersion()}"/>
    <link rel="stylesheet" href="${ctxPath}/assets/common/module/admin.css?v=${constants.getReleaseVersion()}"/>
    <style>
        .numberInfoSubTitle {
            color: rgba(0, 0, 0, .45);
            font-size: 14px;
            height: 22px;
            line-height: 22px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-break: break-all;
        }

        .numberInfoValue {
            color: rgba(0, 0, 0, .85);
            font-size: 24px;
            margin-top: 10px;
            height: 32px;
            line-height: 32px;
        }

        .numberInfoSuffix {
            color: rgba(0, 0, 0, .65);
            font-size: 16px;
            font-style: normal;
            margin-left: 4px;
            line-height: 32px;
        }
    </style>
</head>

<body>

<!-- 加载动画，移除位置在common.js中 -->
<div class="page-loading">
    <div class="ball-loader">
        <span></span><span></span><span></span><span></span>
    </div>
</div>

<!-- 正文开始 -->
<div class="layui-fluid">

    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-tab layui-tab-brief" lay-filter="tabZZT">
                        <ul class="layui-tab-title">
                            <li class="layui-this">月活</li>
                            <li>日活</li>
                        </ul>
                        <div class="layui-tab-content">
                            <div class="layui-tab-item layui-show">
                                <div class="layui-row layui-col-space30">
                                    <div class="layui-col-xs12 layui-col-md12">
                                        <div id="yhyh" style="height: 300px;margin-top: 20px;"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-tab-item">
                                <div class="layui-row layui-col-space30">
                                    <div class="layui-col-xs12 layui-col-md12">
                                        <div id="yhrh" style="height: 300px;margin-top: 20px;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-tab layui-tab-brief">
                        <ul class="layui-tab-title">
                            <li class="layui-this">本月新增用户</li>
                        </ul>
                        <div class="layui-tab-content">
                            <div class="layui-tab-item layui-show">
                                <div class="layui-row layui-col-space30">
                                    <div class="layui-col-xs12 layui-col-md12">
                                        <div id="xzyh" style="height: 300px;margin-top: 20px;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-tab layui-tab-brief">
                        <ul class="layui-tab-title">
                            <li class="layui-this">本月新增职位/简历/投递</li>
                        </ul>
                        <div class="layui-tab-content">
                            <div class="layui-tab-item layui-show">
                                <div class="layui-row layui-col-space30">
                                    <div class="layui-col-xs12 layui-col-md12">
                                        <div id="xzpjt" style="height: 300px;margin-top: 20px;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- js部分 -->
@/* 加入contextPath属性和session超时的配置 */
<script type="text/javascript">
    var Feng = {
        ctxPath: "${ctxPath}",
        version: '${constants.getReleaseVersion()}'
    };
</script>

<script type="text/javascript" src="${ctxPath}/assets/common/libs/layui/layui.js?v=${constants.getReleaseVersion()}"></script>
<script type="text/javascript" src="${ctxPath}/assets/common/js/common.js?v=${constants.getReleaseVersion()}"></script>
<script src="${ctxPath}/assets/common/libs/echarts/echarts.min.js?v=${constants.getReleaseVersion()}"></script>
<script src="${ctxPath}/assets/common/libs/echarts/echartsTheme.js?v=${constants.getReleaseVersion()}"></script>
<script type="text/javascript">
    layui.use(['table', 'admin', 'ax', 'func','element'], function () {
        var $ = layui.$;
        var table = layui.table;
        var $ax = layui.ax;
        var admin = layui.admin;
        var func = layui.func;
        var element = layui.element;

        var now = new Date();
        var year = now.getFullYear();       //年
        var month = now.getMonth() + 1;     //月

        var clock = year + "-";
        if(month < 10)
            clock += "0";

        clock += month + "-" + "01";

        var startDate = clock;
        var endDate = CurentTime();
        //获取统计信息
        var ajax = new $ax(Feng.ctxPath + "/api/count/add_user_count?startDate="+startDate+"&endDate="+endDate);
        var result = ajax.start();
        var dataMap = result.data;

        var companyMap = dataMap.companyCount;
        var staffMap = dataMap.staffCount;
        var studentMap = dataMap.studentCount;

        var positionMap = dataMap.positionMap;
        var resumeMap = dataMap.resumeMap;
        var resumeDeliveryMap = dataMap.resumeDeliveryMap;

        var x_date = Object.keys(companyMap);    //横轴——日期
        var y_company = []; //纵轴——企业
        var y_staff = [];   //纵轴——员工
        var y_student = []; //纵轴——普通用户

        var y_position = [];    //纵轴——职位
        var y_resume = [];      //纵轴——简历
        var y_resume_delivery = [];//纵轴——投递

        for (var i = 0; i < x_date.length; i++) {
            var key = x_date[i];
            y_company.push(companyMap[key]);
            y_staff.push(staffMap[key]);
            y_student.push(studentMap[key]);

            y_position.push(positionMap[key]);
            y_resume.push(resumeMap[key]);
            y_resume_delivery.push(resumeDeliveryMap[key]);
        }
        console.log("y_company: "+ y_company);
        console.log("y_staff: "+ y_staff);
        console.log("y_student: "+ y_student);
        console.log("y_position: "+ y_position);
        console.log("y_resume: "+ y_resume);
        console.log("y_resume_delivery: "+ y_resume_delivery);

        var ajax2 = new $ax(Feng.ctxPath + "/api/count/user_active?startDate="+endDate);
        var result2 = ajax2.start();
        var dataMap2 = result2.data;

        var userByDayMap = dataMap2.userByDayMap;
        var userByMouthMap = dataMap2.userByMouthMap;

        var x_day = Object.keys(userByDayMap);
        var x_mouth = Object.keys(userByMouthMap);
        var y_day_count = [];      //纵轴——日活
        var y_mouth_count = [];//纵轴——月活

        for (var i = 0; i < x_day.length; i++) {
            var key = x_day[i];
            y_day_count.push(userByDayMap[key]);
        }

        for (var i = 0; i < x_mouth.length; i++) {
            var key = x_mouth[i];
            y_mouth_count.push(userByMouthMap[key]);
        }
        console.log("y_day_count: "+ y_day_count);
        console.log("y_mouth_count: "+ y_mouth_count);

        // 渲染月活用户图表
        var myCharts0 = echarts.init(document.getElementById('yhyh'), myEchartsTheme);
        var option0 = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['用户月活']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: x_mouth
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name:'月活',
                    type:'line',
                    data:y_mouth_count
                }
            ]
        };
        myCharts0.setOption(option0);

        // 渲染日活用户图表
        var myCharts1 = echarts.init(document.getElementById('yhrh'), myEchartsTheme);
        var option1 = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['用户日活']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: x_day
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name:'日活',
                    type:'line',
                    data:y_day_count
                }
            ]
        };
        myCharts1.setOption(option1);

        // 切换选项卡重新渲染
        element.on('tab(tabZZT)', function (data) {
            if (data.index == 0) {
                myCharts0.resize();
            } else {
                myCharts1.resize();
            }
        });





        // 渲染新增用户图表
        var myCharts2 = echarts.init(document.getElementById('xzyh'), myEchartsTheme);
        var option2 = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['企业用户','员工用户','普通用户']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: x_date
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name:'企业用户',
                    type:'line',
                    data:y_company
                },
                {
                    name:'员工用户',
                    type:'line',
                    data:y_staff
                },
                {
                    name:'普通用户',
                    type:'line',
                    data:y_student
                }
            ]
        };
        myCharts2.setOption(option2);

        // 渲染本月新增职位/简历/投递图表
        var myCharts3 = echarts.init(document.getElementById('xzpjt'), myEchartsTheme);
        var option3 = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['职位','简历','投递']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: x_date
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name:'职位',
                    type:'line',
                    data:y_position
                },
                {
                    name:'简历',
                    type:'line',
                    data:y_resume
                },
                {
                    name:'投递',
                    type:'line',
                    data:y_resume_delivery
                }
            ]
        };
        myCharts3.setOption(option3);




        // 窗口大小改变事件
        window.onresize = function () {
            myCharts0.resize();
            myCharts1.resize();
            myCharts2.resize();
            myCharts3.resize();
        };
    });
    function CurentTime()
    {
        var now = new Date();

        var year = now.getFullYear();       //年
        var month = now.getMonth() + 1;     //月
        var day = now.getDate();            //日

        var hh = now.getHours();            //时
        var mm = now.getMinutes();          //分

        var clock = year + "-";

        if(month < 10)
            clock += "0";

        clock += month + "-";

        if(day < 10)
            clock += "0";

        clock += day ;
        return(clock);
    }
</script>
</body>

</html>